
import React, { forwardRef, useContext, useEffect, useState, useCallback } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { Select, Input, Row, Col, InputNumber } from 'antd';
import notify from "@utils/tip";
import CustomizeModal, { CustomizeModalContext, CustomizeModalButton } from "@common/presentational/CustomizeModal";
import { createInventoryLoss } from "@sagas/warehouse/stockManagement";

const BreakageContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { warehouseId } = params
    const { callback } = props

    const [number, setNumber] = useState('')
    const [reason, setReason] = useState('')

    const handleNumberChange = useCallback(value => {
        setNumber(value)
    }, [])

    const handleReasonChange = useCallback(e => {
        setReason(e.currentTarget.value)
    }, [])

    const dispatch = useDispatch()

    const submit = () => {
        if (!number) {
            notify('请输入数量')
            return;
        }
        if (!reason) {
            notify('请输入原因')
            return;
        }
        dispatch(createInventoryLoss({ 
            id: warehouseId,
            isSubmitted: true,
            details: [{
                storageType: 2,
                storageKey: params.storage_key,
                quantity: number,
                memo: reason
            }]
         }, () => {
            notify('报损成功', 'success')
            callback && callback()
            hide()
        }))
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>商品:</span>
                </Col>
                <Col span={20}>
                    <span className='ft-clr-d'>{params.name}</span>
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>数量:</span>
                </Col>
                <Col span={20}>
                    <InputNumber
                        min={1}
                        style={{ width: '360px' }}
                        max={999}
                        step={1}
                        value={number}
                        placeholder="请输入报损数量"
                        onChange={handleNumberChange}
                    />
                </Col>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>原因:</span>
                </Col>
                <Col span={20}>
                    <Input
                        value={reason}
                        style={{ width: '360px' }}
                        placeholder="请输入原因"
                        onChange={handleReasonChange}
                    />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title='报损' ref={ref}>
        <BreakageContent {...props} />
    </CustomizeModal>
))